<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">发布</button>
    <textarea id="area" cols="30" rows="10"></textarea>
    <ul id="list">

    </ul>

    <!-- 发布留言时，增加一个删除按钮 

        <a href="javascript:;">删除</a>

        javascript:; 阻止默认跳转动作
    
    -->
    <script>
         //1.查
         var btn= document.getElementById('btn');
       var area= document.querySelector('#area');
       var list= document.getElementById('list');

       //2.加事件
        btn.onclick=function(){
          var li=  document.createElement('li');
        //   li.innerHTML=area.value+'<a href="javascript:;">删除</a>';
           li.innerHTML=area.value;

        //    创建一个超链接
           var link= document.createElement('a');
            link.href='javascript:;';
            link.innerHTML='删除';
            li.appendChild(link);

            // link增加一个删除事件
            link.onclick=function(){
                // this
                console.log(this);// a
                this.parentNode.parentNode.removeChild(this.parentNode);

                // list.removeChild(this.parentNode)

            }


        //追加li
         list.appendChild(li);
         area.value=''




        }
    </script>
</body>
</html>